<template>
    <div class="rootMain">
        <div class="menu-title">{{ navTitle }}</div>
        <div class="menu-list">
            <nuxt-link v-for="(item, index) in checkPath" :key="index" class="menu-item"
                :class="{ 'menu-active': item.path == $route.path }" :to="item.path">
                <img class="icon" :src="item.path == $route.path ? item.icons : item.icon" />
                {{ item.title }}
            </nuxt-link>
        </div>
    </div>
</template>

<script>
import { Icon } from "element-ui";
import { mapState } from "vuex";
export default {
    name: "myMenu",
    props: [""],
    data() {
        return {
            navTitle: "",
        };
    },
    created() { },
    mounted() { },
    computed: {
        ...mapState("common", {
            userInfo: (state) => state.userInfo,
        }),
        checkPath: function () {
            if (this.$route.path) {
                const path = this.$route.path;
                let userPathList = [
                    {
                        title: "账户设置",
                        path: "/user/myset",
                        icon: require("~/assets/images/userCenter/user-zhsz.png"),
                        icons: require("~/assets/images/userCenter/user-zhsz-s.png"),
                    },
                    {
                        title: "我的问答",
                        path: "/user/myquiz",
                        icon: require("~/assets/images/userCenter/user-wdwd.png"),
                        icons: require("~/assets/images/userCenter/user-wdwd-s.png"),
                    },
                    {
                        title: "我的下载",
                        path: "/user/mydownload",
                        icon: require("~/assets/images/userCenter/user-wdxz.png"),
                        icons: require("~/assets/images/userCenter/user-wdxz-s.png"),
                    },

                    // {
                    //     title: "学习记录",
                    //     path: "/MyPlaybackRecord",
                    // },
                    // {
                    //     title: "我的订单",
                    //     path: "/user/myorderform",
                    // },
                    {
                        title: "我的收藏",
                        path: "/user/mycollect",
                        icon: require("~/assets/images/userCenter/user-wdsc.png"),
                        icons: require("~/assets/images/userCenter/user-wdsc-s.png"),
                    },
                    {
                        title: "我的卡包",
                        path: "/user/mycoupon",
                        icon: require("~/assets/images/userCenter/user-wdkb.png"),
                        icons: require("~/assets/images/userCenter/user-wdkb-s.png"),
                    },
                    // {
                    //     title: "我的关注",
                    //     path: "/user/myfansfollows",
                    // },
                ];
                let servicePathList = [
                    {
                        title: "企服订单",
                        path: "/user/myserviceorder",
                        icon: require("~/assets/images/userCenter/user-qfdd.png"),
                        icons: require("~/assets/images/userCenter/user-qfdd-s.png"),
                    },
                    {
                        title: "我的需求",
                        path: "/user/mydemand",
                        icon: require("~/assets/images/userCenter/user-wdxq.png"),
                        icons: require("~/assets/images/userCenter/user-wdxq-s.png"),
                    },
                    // {
                    //     title: "我的代金券",
                    //     path: "/user/myvoucher",
                    //     icon: require("~/assets/images/userCenter/user-wddjq.png"),
                    //     icons: require("~/assets/images/userCenter/user-wddjq-s.png"),
                    // },
                ];
                if (this.userInfo && this.userInfo.service_info)
                    servicePathList.push({
                        title: "我的投标",
                        path: "/user/mydemandorder",
                        icon: require("~/assets/images/userCenter/user-wdxq.png"),
                        icons: require("~/assets/images/userCenter/user-wdxq-s.png"),
                    })
                let askPathList = [
                    // {
                    //     title: "我的问答",
                    //     path: "/user/myquiz",
                    // },

                    {
                        title: "我的回答",
                        path: "/user/myanswer",
                        icon: require("~/assets/images/userCenter/user-wdhd.png"),
                        icons: require("~/assets/images/userCenter/user-wdhd-s.png"),
                    },
                ];
                let vipPathList = [
                    {
                        title: "小竹会员",
                        path: "/user/myvip",
                    },
                    {
                        title: "小竹叶",
                        path: "/user/mybamboo",
                    },
                ];
                for (let item of userPathList) {
                    if (path == item.path) {
                        this.navTitle = "个人中心";
                        this.$emit("getNavTitle", this.navTitle);
                        return userPathList;
                    }
                }
                for (let item of servicePathList) {
                    if (path == item.path) {
                        this.navTitle = "企服中心";
                        this.$emit("getNavTitle", this.navTitle);
                        return servicePathList;
                    }
                }
                for (let item of askPathList) {
                    if (path == item.path) {
                        this.navTitle = "专业人士中心";
                        this.$emit("getNavTitle", this.navTitle);
                        return askPathList;
                    }
                }
                for (let item of vipPathList) {
                    if (path == item.path) {
                        this.navTitle = "会员中心";
                        this.$emit("getNavTitle", this.navTitle);
                        return vipPathList;
                    }
                }
                return [];
            }
        },
    },
    methods: {},
};
</script>

<style lang="scss" scoped>
.rootMain {}

.menu-title {
    font-size: 18px;
    font-weight: 700;
    color: #333333;
    padding-top: 20px;
    padding-bottom: 20px;
    text-align: center;
}

.menu-list {
    padding-bottom: 300px;
}

.menu-item {
    display: flex;
    align-items: center;
    // justify-content: center;
    padding-left: 45px;
    font-size: 16px;
    color: #666666;
    height: 50px;
    cursor: pointer;
    box-sizing: border-box;
    width: 203px;
    height: 50px;
    margin: 0 auto;

    border-radius: 30px;

    img {
        width: 25px;
        height: 25px;
        margin-right: 12px;
        display: block;
    }
}

.menu-active {
    background: linear-gradient(90deg, #4f9eff 0%, #2f8dff 100%);
    box-shadow: 0px 3px 6px 0px rgba(28, 135, 243, 0.3);
    color: #ffffff;
}
</style>
